<template>
  <div class="sidebar">
    <button @click="newConversation" class="new-conversation-btn">
      + 新对话
    </button>

    <el-divider border-style="double" style="margin-top: 0px" />
    <div
      v-for="(conversation, index) in conversations"
      :key="index"
      class="conversation-item"
      @click="switchConversation(index)"
    >
      {{ truncateText(conversation.title, 10) }}
    </div>
    <button @click="clearAllConversations" class="clear-all-conversations-btn">
      <i class="fas fa-trash-alt"></i>
      <span class="clear-text">清除所有对话</span>
    </button>
  </div>
</template>

<script>
export default {
  name: "SideBarComponent",
  data() {
    return {
      conversations: [], // 保存之前的对话
    };
  },
  methods: {
    newConversation() {
      const currentConversation = this.getCurrentConversation();
      if (currentConversation) {
        this.conversations.push(currentConversation);
      }
      this.$emit("new-conversation");
    },
    getCurrentConversation() {
      const firstUserMessage = this.$parent.messages.find((msg) => msg.isUser);
      const title = firstUserMessage
        ? firstUserMessage.text
        : `对话 ${this.conversations.length + 1}`;
      return {
        title,
        messages: this.$parent.messages,
      };
    },
    switchConversation(index) {
      this.$emit("switch-conversation", this.conversations[index]);
    },
    clearAllConversations() {
      this.conversations = [];
      this.$emit("clear-all-conversations");
    },
    truncateText(text, maxLength) {
      return text.length > maxLength
        ? text.substring(0, maxLength) + "..."
        : text;
    },
  },
};
</script>

<style scoped>
.sidebar {
  position: fixed;
  top: 60px; /* 确保导航栏下方 */
  left: 0;
  width: 250px;
  height: calc(100vh - 60px); /* 导航栏的高度为 60px */
  background-color: #f8f9fa;
  padding: 20px;
  padding-top: 30px; /* 增加顶部填充以使按钮与导航栏保持距离 */
  display: flex;
  flex-direction: column;
  align-items: center;
}

.new-conversation-btn {
  margin-bottom: 20px;
  padding: 7px 0;
  font-size: 16px;
  font-weight: bold;
  color: rgb(89, 89, 247);
  background-color: #e7ebf6;
  border: 0.1px solid #b8c9f4;
  border-radius: 12px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%; /* 使按钮宽度适应侧边栏宽度 */
  max-width: 200px; /* 可选：设置最大宽度 */
  text-align: center;
}

.new-conversation-btn:hover {
  background-color: #d2dbf7;
}

.new-conversation-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.conversation-item {
  width: 100%;
  padding: 6px;
  margin-bottom: 5px; /* 缩短历史对话按钮之间的间距 */
  border-radius: 5px;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background-color: #f8f9fa; /* 与侧边栏背景色一致 */
}

.conversation-item:hover {
  background-color: #ced4da;
}

.clear-all-conversations-btn {
  background-color: #f8f9fa; /* 与侧边栏背景色一致 */
  color: #a1a1a1;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition:
    background-color 0.3s ease,
    color 0.3s ease;
  width: 100%;
  max-width: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  margin-top: auto;
}

.clear-all-conversations-btn .clear-text {
  display: none;
}

.clear-all-conversations-btn:hover {
  background-color: #dc3545;
  color: white;
}

.clear-all-conversations-btn:hover .clear-text {
  display: inline;
  margin-left: 8px;
}

.clear-all-conversations-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(220, 53, 69, 0.5);
}
</style>
